<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="<%=basePath%>css/bootstrap.min.css" rel="stylesheet">

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- MetisMenu CSS -->
<link href="<%=basePath%>css/metisMenu.min.css" rel="stylesheet">

<!-- DataTables CSS -->
<link href="<%=basePath%>css/dataTables.bootstrap.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="<%=basePath%>css/sb-admin-2.css" rel="stylesheet">

<!-- Custom Fonts -->
<link href="<%=basePath%>css/font-awesome.min.css" rel="stylesheet"
	type="text/css">
<link href="<%=basePath%>css/boot-crm.css" rel="stylesheet"
	type="text/css">

<!-- jQuery -->
<script src="<%=basePath%>js/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="<%=basePath%>js/bootstrap.min.js"></script>

<!-- Metis Menu Plugin JavaScript -->
<script src="<%=basePath%>js/metisMenu.min.js"></script>

<!-- DataTables JavaScript -->
<script src="<%=basePath%>js/jquery.dataTables.min.js"></script>
<script src="<%=basePath%>js/dataTables.bootstrap.min.js"></script>

<!-- Custom Theme JavaScript -->
<script src="<%=basePath%>js/sb-admin-2.js"></script>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="hidden-sm hidden-xs" style="height: 200px;">&nbsp;</div>
			<div class="col-lg-12 " style="height: 40px;">&nbsp;</div>

			<div class="col-lg-4 col-md-3 col-sm-3 col-xs-12" style="height: 40px;">&nbsp;</div>
			<div id="errorinfo" style="color:red">&nbsp;</div>
			<form id="loginform" class="form-horizontal col-md-6 col-lg-4 col-sm-6 col-xs-12"  style="margin-top: 5px;">
				<form class="form-group">
					<label for="username">用户名</label> <input
						type="text" id="username" class="form-control" placeholder="用户名" name="username"
						> 
					<label for="inputPassword">密码</label> 
					<input type="password" name="password"
						id="inputPassword" class="form-control" placeholder="密码" >
					<div class="checkbox">
						<label> <input type="checkbox" value="remember-me">
							记住我
						</label>
					</div>
					<div class="col-lg-12" style="height: 20px;">&nbsp;</div>
					<button type="button" class="btn btn-lg btn-primary btn-block" onclick="login()">登录</button>
				</form>
			</form>

			<div class="col-lg-4 col-md-3 col-sm-3 col-xs-12" style="height: 240px;">&nbsp;</div>
			<div class="col-lg-12" style="height: 40px;">&nbsp;</div>
		</div>
	</div>
	
	<script type="text/javascript">
		function login(){
			$.ajax({
				type:"post",
				url:"<%=basePath%>login.action",
				data:$("#loginform").serialize(),
				success:function(data) {
					if(data.trim()=="ok")   
					{  
						window.location.href="<%=basePath%>index.action";		
					}
					if(data.trim()=="repetition"){
						$("#errorinfo").html("请不要重复登入  ");
					}
					if(data.trim()=="locked"){
						$("#errorinfo").html("账号已被冻结 ");
					}else{
						$("#errorinfo").html("用户名或密码错误 ");
					}
				},
				error:function(){
					//$("#errorinfo").html("用户名或密码错误 ");
				}
			});	
		}
	
	</script>
</body>
</html>